﻿<%@ Page Language="C#" Inherits="System.Web.Mvc.ViewPage" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >
<head runat="server">
    <title>Index</title>
    <link href="../../Scripts/extjs/resources/css/ext-all.css" rel="stylesheet" type="text/css" />


    <script src="../../Scripts/l10n.js" type="text/javascript"></script>
   <script src="../../Scripts/extjs/adapter/ext/ext-base.js" type="text/javascript"></script>
    <script src="../../Scripts/extjs/ext-all.js" type="text/javascript"></script>

    
    <script src="../../Scripts/welcome.js" type="text/javascript"></script>
    <script type="text/javascript">
        var tabLogin,
            tabPassword,
            tabInfo,
            tabPanelMain,
			viewPort;
		Ext.onReady(function(){
			
			tabLogin = {
				id:'tab-login',
				xtype:'container',
				contentEl:'pn-login',
				title: L10N.welcomepage.tabLogin,
				viewConfig: {layout:'fit'},
				autoScroll:false,
				items:[
					{
						xtype:'box',
						autoEl:{
							tag:'img',
							src:'../../Content/images/tracker-system.png'
						}
					},
					{
					   layout:'form',
					   buttonAlign: 'center',
					   bodyStyle: 'padding:15px 0px 0px 15px',
					   border: false,					   
					   items: [
							{
							   xtype:'textfield',
							   fieldLabel:L10N.welcomepage.userName,
							   id:'txtUserName',
							   name:'txtUserName',
							   value:'phu'
							},
							{
							   xtype:'textfield',
							   fieldLabel:L10N.welcomepage.passWord,
							   id:'txtPassword',
							   name:'txtPassword',
							   inputType: 'password',
							   value:'123'
							}
							
					   ],					   
						buttons: [
							{
								text: 'Đăng nhập',								
								isFormfield: false,
								listeners: {
									click: function(){ 				
									
										var errEl = Ext.get('lblLoginError');
										var userName = Ext.getCmp('txtUserName').getValue();
										var password = Ext.getCmp('txtPassword').getValue();
										if(userName.trim() == '' || password.trim() == ''){
											errEl.setStyle('visibility','visible');
											errEl.update(L10N.welcomepage.requireUserName);
											return false;
										}
										
									    Ext.Ajax.request({
                                           url: 'Home',    
                                           method: 'POST',
                                           params: { userName: userName, password:password },										 
                                           success: function(response, opts){
												var rs = response.responseText;
												
												
										   }
                                        });
										
											
									
									}
								}
								
							
							}
						]
				   },
				   {
						xtype : 'box',
						id : 'lblLoginError',
						cls:'x-form-item',
						style : 'text-align: center; visibility: hidden; margin-top: 2px; color: #FF0000;',
						isFormField : false,
						autoEl : {
							tag : 'div',
							html : 'Image Caption'									
						}
					}
				]
			};
			tabPassword = {
				id:'tab-password',
				contentEl:'pn-password',
				title: L10N.welcomepage.tabPassword,
				viewConfig: {layout:'fit'},
				autoScroll:true
			};
			tabInfo = {
				id:'tab-info',
				contentEl:'pn-info',
				title: L10N.welcomepage.tabInfo,
				viewConfig: {layout:'fit'},
				autoScroll:true
			};
			tabPanelMain = new Ext.TabPanel({
				region: 'center',
				margins: '0 0 0 0',
				activeTab: 0,
				items: [tabLogin, tabPassword, tabInfo,]
			});  
			containerPanel = {
				header: false,
				title: 'Menu', 					
				border:false,
				region: 'center',
				width:310,
				height:200,
				layout:'border',
				items:[
						tabPanelMain
				]
			};  
			viewport = new Ext.Viewport({
				layout: {
					type: 'vbox',
					align: 'center',
					pack: 'center'
				},
				items:[ 
						containerPanel
				]       
			});
			console.log(2);
		});  
            
    </script>
</head>
<body>
    <div id="center"></div>
	<div id="pn-login"></div>
	<div id="pn-password"></div>
	<div id="pn-info"></div>
</body>
</html>
